<script lang="ts" setup>
defineOptions({
  name: "Advert",
});
let props = defineProps({
  ads_id: {
    type: [String, Number],
  },
  ads_type: {
    type: [String, Number],
    default: 0, // 0: 320 * 250 1: 320 * 100
  },
  ads_class: {
    type: [String],
    default: "",
  },
});
let emit = defineEmits([
  "update:ads_id",
  "update:ads_type",
  "update:ads_class",
]);
let ads_id = useRefModel(props, "ads_id", emit);
let ads_type = useRefModel(props, "ads_type", emit);
let ads_class = useRefModel(props, "ads_class", emit);
let defaultStyles: any = {
  0: {
    width: "320px",
    height: "250px",
  },
  1: {
    width: "320px",
    height: "100px",
  },
};
let style = defaultStyles[ads_type.value];

onMounted(() => {
  // @ts-ignore
  (adsbygoogle = window.adsbygoogle || []).push({});
  console.log(`广告代码执行了${ads_id.value}`);
});
</script>
<template>
  <div
    :class="`advert-index ${ads_class}`"
    :style="{
      height: style.height,
    }"
  >
    <ins
      class="adsbygoogle"
      :style="{
        display: 'inline-block',
        ...style,
      }"
      data-ad-client="ca-pub-7826482262281669"
      :data-ad-slot="ads_id"
    ></ins>
  </div>
</template>
<style lang="scss" scoped>
.advert-index {
  text-align: center;
}
</style>
